<template>
  <div style="height: 100%">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/base/survey/index' }">问卷管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/base/survey/detail', query: {id: this.$route.query.id} }">问卷详情</el-breadcrumb-item>
      <span>样本复核</span>
      <span @click="drawer = true" style="position: absolute; right: 2%"><i class="el-icon-search"><b>查看全部</b></i></span>
    </el-breadcrumb>

    <el-row :gutter="24" style="height: 100%; padding-top: 20px;">
      <el-col :span="24" style="height: 100%; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
        <div style="height: 30%">
          <el-carousel ref="carousel" :indicatorPosition="'none'" :interval="4000" type="card" height="150px" :loop="true" :autoplay="false" :initial-index="currentCheckInfo.index" @change="changeCard">
            <el-carousel-item v-for="(item, index) in checkList.list" :key="item.id" style="background-image: linear-gradient(90deg,#9ca5f5,#7ff5ae)" >
              <div style="padding: 24px; position: relative; ">
                <span style="font-size: 40px">{{item.phone}}</span>
                <div style="font-size: 14px">
                  <i class="el-icon-phone"></i>
                  <span><b>通话时间：</b></span>
                  <span>{{item.startTime}}</span> -
                  <span>{{item.endTime}}</span>
                </div>
                <div style="font-size: 14px">
                  <i class="el-icon-alarm-clock"></i>
                  <span><b>通话时长：</b></span>
                  <span>{{item.callLastsTime}}秒</span>
                </div>
                <div style="font-size: 14px">
                  <i class="el-icon-alarm-clock"></i>
                  <span><b>坐席号码：</b></span>
                  <span>{{item.seat}}</span>
                </div>
                <div style="position: absolute; right: 20px; bottom: 20px">收集：{{item.createAt}}</div>

                <div class="check-cancel" v-if="item.reviewStatus == 2">审核作废</div>
                <div class="check-pass" v-if="item.reviewStatus == 1">审核通过</div>
              </div>
            </el-carousel-item>
          </el-carousel>
          <div style="width: 100%; padding: 0 0 0 10%">
            <aplayer :theme="'#67c23a'" style="display:inline-block;width: 80%; background-color: cornsilk" v-if="!emptyCheck && currentCheckInfo && currentCheckInfo.showPlayer" ref="aplayer" :music="currentCheckInfo && currentCheckInfo.videoPlay" @canplay="audioCanplay" :autoplay="false">
            </aplayer>
          </div>
        </div>
        <div style="height: 70%; overflow-y: scroll" v-if="currentCheckInfo">
          <Check ref="surveyEditor" :survey-id="currentCheckInfo.survey.id" :active="true" v-if="!emptyCheck && this.currentCheckInfo.survey.id" :answer-id="currentCheckInfo.survey.answerId"
                :update-mode="true"  :phone="currentCheckInfo.survey.phone" :agent-id="currentCheckInfo.survey.agentUUID" :seat="currentCheckInfo.survey.agentno"
                 @checkBack="checkBack"/>
        </div>

      </el-col>
    </el-row>

    <el-drawer
      title="请选择要复核的通话"
      :visible.sync="drawer"
      :direction="direction">
      <div style="padding-left: 8px">
        <el-form :inline="true" :model="checkList.pageParams" class="user-search">
          <el-form-item label="搜索：">
          </el-form-item>
          <el-form-item label="" v-for="(filter, index) in checkList.pageParams.filters" :key="index">
            <el-input size="small" v-model="filter.fieldValue" v-bind:fieldName="filter.fieldName"
                      v-if="filter.showAble && filter.type !== 'change' "
                      v-bind:fieldValue="filter.fieldValue" v-bind:compare="filter.compare"
                      :disabled="filter.readonly"
                      @keyup.enter.native="checkList.selectList"
                      :placeholder="filter.placeholder" :readonly="filter.readonly" clearable/>

            <el-select v-if="filter.showAble && filter.type === 'change' " v-model="filter.fieldValue"
                       v-bind:fieldName="filter.fieldName"
                       v-bind:fieldValue="filter.fieldValue"
                       v-bind:compare="filter.compare" :placeholder="filter.placeholder"
                       :readonly="filter.readonly" clearable>
              <el-option label="未复核" value="0"></el-option>
              <el-option label="已复核" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="是否复核">

          </el-form-item>

          <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="pageSelect">搜索</el-button>
          </el-form-item>
        </el-form>

        <el-table size="small" :data="checkList.list" highlight-current-row v-loading="checkList.loading" border
                  v-if="checkList.list.length !==0"
                  element-loading-text="拼命加载中"
                  style="width: 100%;" :header-row-style="{width: '100%', color: 'darkorange'}">

          <el-table-column prop="phone" label="访问对象" width="100">
          </el-table-column>

          <el-table-column prop="createAt" label="收集时间">
          </el-table-column>

          <el-table-column prop="reviewStatus" label="复核">
            <template slot-scope="scope">
              <el-text type="primary">{{scope.row.reviewStatus === 0 ? "未复核" : scope.row.reviewStatus === 1 ? "通过" : "作废"}}</el-text>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="toCheck(scope.$index, currentCheckInfo.index)">复核</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-empty :image-size="150" v-if="checkList.list.length==0"></el-empty>
      </div>
    </el-drawer>

  </div>
</template>
<style>
  .check-pass {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 20px;
    color: #13ce66;
    border: 2px solid;
    border-radius: 4px;
    transform: rotate(20deg);

  }

  .check-cancel {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 20px;
    color: red;
    border: 2px solid;
    border-radius: 4px;
    transform: rotate(20deg);
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
<script>
  import Pagination from "../../../components/Pagination.vue";
  import aplayer from 'vue-aplayer';
  import {answerList} from "../../../api/baseMG";
  import Survey from "../../../components/survey"
  import Check from "../../../components/check.vue";

  export default {
    data() {
      return {
        emptyCheck: false,
        drawer: false,
        direction: 'rtl',
        currentCheckInfo: {
          index: 0,
          showPlayer: false,
          videoPlay: {
            title: '音频',
            artist:'',
            src: '',
            pic: '',
          },
          survey: {

          }
        },
        checkList: {
          loading: false,
          list: [],
          pageParams: {
            page: 1,
            perPage: 10,
            filters: [
              {
                showAble: false,
                readonly: true,
                placeholder: "默认",
                fieldName: "surveyId",
                compare: "=",
                fieldValue: this.$route.query.id
              },
              {
                showAble: true,
                readonly: false,
                placeholder: "电话号码",
                fieldName: "phone",
                compare: "like",
                fieldValue: null
              },
              {
                showAble: true,
                readonly: false,
                type: "change",
                placeholder: "是否复核",
                fieldName: "review_status",
                compare: "=",
                fieldValue: null
              },
              {
                showAble: false,
                readonly: false,
                placeholder: "默认",
                fieldName: "record",
                compare: "!=",
                fieldValue: ""
              }
            ],
          }
        }
      }
    },
    created() {
      this.pageSelect();
    },
    components: {
      Check,
      Pagination,
      Survey,
      aplayer
    },
    methods: {
      checkBack: function (res) {
        let listElement = this.checkList.list[this.currentCheckInfo.index];
        listElement.reviewStatus = res? 1: 2;
        this.$refs.aplayer.pause()
      },
      audioCanplay(el) {
        const audio = el.target;
        const audioDuration = audio.duration;
        if (audioDuration === Infinity) {
          audio.currentTime = 200;
          audio.ontimeupdate = () => {
            audio.ontimeupdate = () => { return; };
            // 不重新设置currtTime,会直接触发audio的ended事件，因为之前将currentTime设置成了一个比音频时长还大的值。所以要将currentTime重置为初始状态。
            // 注: 这里有一个问题，直接设置为0 是不起作用的。需要重新设置一下audio.currentTime = 1e101;然后再设置为
            audio.currentTime = 200;
            audio.currentTime = 0;
          }
        }
      },
      setActive(index) {
        this.$ref.carousel.setActiveItem(index);
      },
      changeCard(index, oldVal) {
        this.$refs.carousel.setActiveItem(index);
        this.currentCheckInfo.index = index;
        let element = this.checkList.list[index];
        this.currentCheckInfo.videoPlay = {
          src: "https://tj.svdata.cn/yscrm/servlet/filedown?showname=11&filename=" + element.record,
          title: element.agentUuid,
          artist: element.phone,
          pic: ''
        };
        this.currentCheckInfo.showPlayer = true;
        this.currentCheckInfo.survey = {
          id: element.surveyId,
          agentUUID: element.agentUuid,
          phone: element.phone,
          answerId: element.id
        };
        // this.$refs.surveyEditor.$forceUpdate();
      },
      toCheck(index, row) {
        this.changeCard(index, row);
      },
      pageSelect() {
        this.selectList(this.checkList.pageParams);
      },
      selectList(params) {
        answerList(params).then(resp => {
          if(resp.success) {
            this.checkList.list = resp.data.list
          }
          if(this.checkList.list.length > 0) {
            console.log(11111111111111111)
            this.emptyCheck = false;
            this.toCheck(0, 0)
          } else {
            this.emptyCheck = true;
          }
        })
      }

    }
  }

</script>
